<div class="container">
    <div class="crumbs">
        <ul id="breadcrumbs" class="breadcrumb">
            <li><i class="icon-home"></i> <a href="">Products</a></li>
            <li class="current"><a href="" title="">Categories</a></li>
        </ul>

    </div>
    <div class="page-header">
        <div class="page-title"><h3>Categories</h3></div>

    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="widget box">
                <div class="widget-header"><h4><i class="icon-reorder"></i> New Category</h4>

                    <div class="toolbar no-padding">
                        <div class="btn-group"><span class="btn btn-xs widget-collapse"><i
                                    class="icon-angle-down"></i></span></div>
                    </div>
                </div>
                <div class="widget-content">
                    <form id="form" class="form-horizontal row-border" action=""
                          method="post">
                        <div class="form-group"><label class="col-md-2 control-label">Category name:</label>

                            <div class="col-md-10">
                                <input id="name" type="text" name="name" class="form-control">
                                <input id="id" hidden="hidden" name="id">
                            </div>
                        </div>
                        <div class="align-center">
                            <p class="btn-toolbar btn-toolbar-demo">
                                <button id="clear" class="btn">Clear</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="widget box">
                <div class="widget-header"><h4><i class="icon-reorder"></i> List Category</h4>

                    <div class="toolbar no-padding">
                        <div class="btn-group"><span class="btn btn-xs widget-collapse"><i
                                    class="icon-angle-down"></i></span></div>
                    </div>
                </div>
                <div class="widget-content">
                    <table class="table table-striped table-bordered table-hover datatable">
                        <thead>
                        <tr>
                            <th class="align-center">ID</th>
                            <th class="align-center">Name</th>
                            <th class="align-center"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php
                        foreach ($entries as $entry) {
                            ?>
                            <tr>
                                <td class="align-center"><?php echo $entry->id ?></td>
                                <td class="align-center"><?php echo $entry->name ?></td>
                                <td class="align-center">
                                    <ul class="table-controls">
                                        <li><a href="javascript:void(0);" class="bs-tooltip" title="Edit"><i
                                                    class="icon-pencil"></i></a></li>
                                        <li><a href="javascript:void(0);" class="bs-tooltip" title="Delete"><i
                                                    class="icon-trash"></i></a></li>
                                    </ul>
                                </td>
                            </tr>
                        <?php
                        }
                        ?>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#clear').click(function () {
        $('#name').val("");
    });

    $('.icon-pencil').click(function () {
        id = $(this).closest('tr').children('td').eq(0).html();
        name = $(this).closest('tr').children('td').eq(1).html();
        $('#name').val(name);
        $('#id').val(id);
    })
    $('#form').submit(function () {
        $.post('http://localhost/admin/product/save_category', $(this).serialize())
            .done(function (data) {
                if (parseInt(data) == 1) {
                    $('#form').prepend("<div class='alert alert-info fade in'> " +
                        "<i class='icon-remove close' data-dismiss='alert'></i>" +
                        " Successfully. </div>");
                }
                else {
                    $('#form').prepend("<div class='alert alert-danger fade in'> " +
                        "<i class='icon-remove close' data-dismiss='alert'></i>" +
                        " Unsuccessfully. </div>");
                }
                setTimeout(function () {
                    location.reload();
                }, 1000)

            });
        return false;

    })
    $('.icon-trash').click(function () {
        id = $(this).closest('tr').find('td').eq(0).html();
        name = $(this).closest('tr').find('td').eq(1).html();
        if (confirm('Are you sure to delete category ' + name + '?')) {
            $.post('http://localhost/admin/product/delete_category', { id: id})
                .done(function (data) {
                    if (parseInt(data) == 1) {
                        $('#form').prepend("<div class='alert alert-info fade in'> " +
                            "<i class='icon-remove close' data-dismiss='alert'></i>" +
                            " Successfully. </div>");
                    }
                    else {
                        $('#form').prepend("<div class='alert alert-danger fade in'> " +
                            "<i class='icon-remove close' data-dismiss='alert'></i>" +
                            " Unsuccessfully. </div>");
                    }
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                })
        }
    });
</script>